<template>
    <div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu">111111111111111111</div>
</template>
<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);

export default {
    methods: {
        onContextmenu(event) {
            this.$contextmenu({
                items: [
                    { label: "删除(R)", divided: true, icon: "el-icon-refresh" },
                    { label: "投射(C)...", divided: true },
                    {
                        label: "编辑(",
                        divided: true,
                        minWidth: 0,
                        children: [{
                            label: "编辑1", onClick: () => {
                                console.log("编辑11111111");
                            }
                        }, {
                            label: "翻译成繁体中文", onClick: () => {
                                console.log("编辑2222");
                            }
                        }]
                    },
                    {
                        label: "删除",
                        minWidth: 0,
                        icon: "el-icon-delete-solid",
                        children: [
                            {
                                label: "删除1",
                                icon: "el-icon-delete-solid",
                                onClick: () => {
                                    console.log("删除2");
                                }
                            },
                        ]
                    },
                    { label: "查看网页源代码(V)", icon: "el-icon-view" },
                    { label: "删除", disabled: true },
                ],
                event, // 鼠标事件信息
                customClass: "custom-class", // 自定义菜单 class
                zIndex: 3, // 菜单样式 z-index
                minWidth: 230 // 主菜单最小宽度
            });
            return false;
        }
    }
};
</script>
<style>
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
    background: #ffecf2 !important;
    color: #ff4050 !important;
}
</style>